<template>
  <div style="height: 100%; background-color: #f1f1f1">
    <header class="hd">
      <span class="goback" @click="router.go(-1)">返回</span>
      <span>发文章</span>
      <span class="confirm" @click="commit">发表</span>
    </header>
    <main style="margin-top: 0.2415rem">
      <div class="title">
        <input
          type="text"
          placeholder="请输入文章标题"
          v-model="formData.title"
        />
      </div>
      <div class="content">
        <textarea
          rows="10"
          placeholder="这里是文章的内容(分享新鲜事)..."
          v-model="formData.content"
        ></textarea>
      </div>
      <div class="imgUrl">
        <div
          class="imgItem"
          v-if="formData.contentImg.length != 0"
          v-for="(item, index) in formData.contentImg"
          :key="index"
        >
          <img :src="item" alt="" />
        </div>
        <div
          class="empty"
          @click="selectPhoto"
          v-if="formData.contentImg.length != 3"
        >
          <input
            type="file"
            ref="photoInput"
            accept="image/*"
            style="display: none"
          />
          <span class="iconfont icon-tupian"></span>
          <span style="opacity: 0.5">照片</span>
        </div>
      </div>
    </main>
    <div class="watermark">
      <span>分享快乐生活</span>
      <span>查看身边人的新鲜事</span>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { putBase64Img, insertArticle } from "@/api/index";
const route = useRoute();
const router = useRouter();
// 收集信息
const formData = reactive({
  title: "",
  content: "",
  contentImg: [],
  uid: JSON.parse(localStorage.getItem("userInfo"))[0].id,
});
const commit = async () => {
  //判断标题 内容是否为空
  if (formData.title == "" && formData.content == "") {
    ElMessage({
      showClose: true,
      message: "文章的标题跟内容不能为空",
      type: "error",
    });
  } else {
    let data = await insertArticle(formData);
    console.log(data);
    if (data.data.code == 200) {
      ElMessage({
        showClose: true,
        message: "添加成功!",
        type: "success",
      });
      router.push("/");
    }
  }
};
let off = ref(true);
let photoInput = ref();
// 选择照片
const selectPhoto = () => {
  off.value = true;
  photoInput.value.click();
  // 添加change事件监听器，当用户选择文件后触发
  photoInput.value.addEventListener("change", (e) => {
    if (off.value) {
      const file = e.target.files[0]; // 获取用户选择的文件
      console.log(file);
      const reader = new FileReader(); // 创建一个FileReader对象

      // 设置文件读取完成后的回调函数
      reader.onload = async (event) => {
        const imageUrl = event.target.result; // 获取图片的base64编码
        // 在这里可以将图片显示在页面上或进行其他操作
        console.log(imageUrl);
        // let data = await putBase64Img(new Date().getTime() + e.target.files[0].name, imageUrl)
        // formData.contentImg.push('https://' + data.data.imgUrl)
      };
      off.value = false;
      // 读取文件内容
      reader.readAsDataURL(file);
    }
  });
};

onMounted(() => {
  //console.log('3.-组件挂载到页面之后执行-------onMounted')
});
</script>
<style scoped lang="css">
.hd {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  line-height: 1.3246rem;
  font-size: 0.4331rem;
}

.goback {
  padding: 0 0.2415rem;
}

.confirm {
  padding: 0 0.2415rem;
  border-radius: 0.1932rem;
  background-color: aquamarine;
}

.title input {
  width: 100%;
  border: 0;
  height: 1.0246rem;
  padding-left: 0.3623rem;
}

input::placeholder {
  color: rgb(209, 216, 221);
  font-size: 0.4831rem;
  text-align: center;
}

.content {
  margin-top: 0.2415rem;
}

.content textarea {
  width: 100%;
  border: 0;
  resize: none;
  padding: 0.2415rem;
}

textarea::placeholder {
  color: rgb(209, 216, 221);
  font-size: 0.4831rem;
  /* text-align: center; */
}

.imgUrl {
  width: 100%;
  padding: 0.1208rem;
  background-color: #fff;
  display: flex;
}

.empty {
  width: 33vw;
  height: 30vw;
  background-color: #f1f1f1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.imgItem {
  width: 33vw;
  height: 30vw;
  background-color: #f1f1f1;
  padding: 0 0.1208rem;
}

.imgItem img {
  width: 100%;
  height: 100%;
}

.icon-tupian {
  font-size: 1.2246rem;
  opacity: 0.5;
}

.watermark {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.4831rem;
  color: rgb(183, 191, 197);
  margin-top: 1.7246rem;
}
</style>
